<script lang="ts" setup>
import { computed } from 'vue';

interface Props {
	bgColor?: string;
	placeholder?: string;
}

const model = defineModel();
const emit = defineEmits(['ok']);
const props = withDefaults(defineProps<Props>(), {
	bgColor: '#f6f6f6'
});

const style = computed(() => {
	return {
		backgroundColor: props.bgColor
	};
});

function handleSearch() {
	emit('ok');
}
</script>

<template>
	<view class="dlk-search" :style="style">
		<x-icon name="search" :size="28"></x-icon>
		<input class="input" v-model="model" :placeholder="placeholder" />
		<x-button type="primary" shape="round" @tap="handleSearch">搜索</x-button>
	</view>
</template>

<style lang="scss" scoped>
.dlk-search {
	border-radius: 200rpx;
	background: #f6f6f6;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16rpx;
	padding: 0 12rpx 0 32rpx;

	.input {
		flex: 1;
		padding: 20rpx 0;
		font-size: 26rpx;
		height: 26rpx;
		position: relative;
		top: 2rpx;
	}
}
</style>
